<template>
    <view class="smart-page">
        <view class="smart-page-head">
            <view class="smmart-page-head-title">选择列表</view>
        </view>
        <view>
            <view class="title">普通选择器</view>
            <view class="item">
                <view class="item-title">当前选择</view>
                <view class="item-picker">
                    <picker @change="btnPickerChange" mode="selector" :range="array" range-key="cname">
                        {{array[index].cname}}
                    </picker>
                </view>
            </view>
        </view>
        <view>
            <view class="title">日期选择器</view>
            <view class="item">
                <view class="item-title">当前选择</view>
                <view class="item-picker">
                    <picker @change="bindDatePickerChange" mode="date">{{choiceDate}}</picker>
                </view>
            </view>
        </view>
        <view>
            <view class="title">时间选择器</view>
            <view class="item">
                <view class="item-picker">
                    <picker @change="bindTimePickeerChange" mode="time">{{time}}</picker>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default{
        data(){
            return{
                array:[{
                    id:1,
                    cname:'中国'
                },
                {
                    id:2,
                    cname:'美国'
                },
                {
                    id:3,
                    cname:'巴西'
                }],
                index:0,
                choiceDate:'2021-4-23',
                time:'12:00'
            }
        },
        methods:{
            bindPickerChane(e){
                console.log(e.detail.value);
                this.index = e.detail.value;
            },
            bindDatePickerChane(e){
                this.choiceDate = e.detail.value;
            },
            bindTimePickerChane(e){
                this.time = e.detail.value;
            }
        }
</script>